import React from 'react';
import './battle.scss';
import $ from 'jquery';
import TweenOne from 'rc-tween-one';
import { api } from 'js/api/base';



class MonsterComponent extends React.Component {
    getHpPer = (hp, maxHp) => {
        let per = parseInt(hp / maxHp * 100);
        return per + '%';
    }
    render() {
        let { monster, skillPaused, skillMount } = this.props;
        let skillConfig = window.totalConfig.skill;
        let monsterSkills = monster.skills;
        let skillNode1 = [], skillNode2 = [];
        for (let i = 0; i < 3 && i < monsterSkills.length; i++) {
            let skillId = monsterSkills[i]
            let item = skillConfig[skillId]
            let node = <div className="skillItem" key={i}>
                <TweenOne animation={{ width: '100%', repeat: -1, duration: item.cd }} paused={skillPaused}
                    moment={skillMount} className="pb-bar" />
                {item.name}
            </div>
            skillNode1.push(node);
        }

        for (let i = 3; i < 6 && i < monsterSkills.length; i++) {
            let skillId = monsterSkills[i]
            let item = skillConfig[skillId]
            let node = <div className="skillItem" key={i}>
                <TweenOne animation={{ width: '100%', repeat: -1, duration: item.cd }} paused={skillPaused}
                    moment={skillMount} className="pb-bar" />
                {item.name}
            </div>
            skillNode2.push(node);
        }

        return <div className="monster">
            <div className="buff"></div>
            <div className="hp">
                <span className="pb-bar" style={{ width: this.getHpPer(monster.hp, monster.maxHp) }}></span>
                <span className="hptext flex">
                    <div className="flex-col-6 text-left name">{monster.name}&nbsp;Lv.{monster.lvl}</div>
                    <div className="flex-col-6 text-right number">{monster.hp}/{monster.maxHp}</div>
                </span>
            </div>
            <div className="skillList  flex d-col-reverse">
                <div className="flex-center">{skillNode1}</div>
                <div className="flex-center">{skillNode2}</div>
            </div>
        </div>
    }
}

MonsterComponent.defaultProps = {
    skillPaused: true,
    skillMount: 0
};

class PlayerComponent extends React.Component {
    getHpPer = (hp, maxHp) => {
        let per = parseInt(hp / maxHp * 100);
        return per + '%';
    }
    render() {
        let { player, skillPaused, skillMount } = this.props;
        let skillConfig = window.totalConfig.skill;
        let playerSkills = player.skills;
        let skillNode1 = [], skillNode2 = [];
        for (let i = 0; i < 3 && i < playerSkills.length; i++) {
            let skillId = playerSkills[i]
            let item = skillConfig[skillId]
            let node = <div className="skillItem" key={i}>
                <TweenOne animation={{ width: '100%', repeat: -1, duration: item.cd }} paused={skillPaused}
                    moment={skillMount} className="pb-bar" />
                {item.name}
            </div>
            skillNode1.push(node);
        }

        for (let i = 3; i < 6 && i < playerSkills.length; i++) {
            let skillId = playerSkills[i]
            let item = skillConfig[skillId]
            let node = <div className="skillItem" key={i}>
                <TweenOne animation={{ width: '100%', repeat: -1, duration: item.cd }} paused={skillPaused}
                    moment={skillMount} className="pb-bar" />
                {item.name}
            </div>
            skillNode2.push(node);
        }
        return <div className="player flex d-col-reverse">
            <div className="buff"></div>
            <div className="hp">
                <span className="pb-bar" style={{ width: this.getHpPer(player.hp, player.maxHp) }}></span>
                <span className="hptext flex">
                    <div className="flex-col-6 text-left number">{player.hp}/{player.maxHp}</div>
                    <div className="flex-col-6 text-right name">{player.name}&nbsp;Lv.{player.lvl}</div>
                </span>
            </div>


            <div className="skillList">
                <div className="flex-center">{skillNode1}</div>
                <div className="flex-center">{skillNode2}</div>
            </div>
        </div>
    }
}

PlayerComponent.defaultProps = {
    skillPaused: true,
    skillMount: 0
};

class BattleHandle extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            skillPaused: true,
            skillMount: null,
            player: this.props.player,
            monster: this.props.monster
        }
    }
    setPlayer = (player) => {
        this.state.player = player;
        this.setState({ player: player })
    }
    setMonster = (monster) => {
        this.state.monster = monster;
        this.setState({ monster: monster })
    }
    componentDidMount() {
        this.battle()
    }
    battle = () => {
        let player = this.state.player;
        let monster = this.state.monster;
        let skillConfig = window.totalConfig.skill;
        let flag = true;
        this.setState({ skillPaused: false, skillMount: null })
        let playerSkills = player.skills;
        let playerSkillsCd = player.skillsCd;
        let playerSkillsCdCopy = playerSkillsCd.slice();
        let monsterSkills = monster.skills;
        let monsterSkillsCd = monster.skillsCd;
        let monsterSkillsCdCopy = monsterSkillsCd.slice();
        this.timer = setInterval(() => {
            if (!flag) {
                return
            }
            for (let [index, item] of playerSkillsCdCopy.entries()) {
                let cd = playerSkillsCdCopy[index] -= 200;
                if (cd === 0) {
                    let skillId = playerSkills[index];
                    let item = skillConfig[skillId];
                    if (monster.hp > 0) {
                        let damage = this.calcDemage(player, monster, item)
                        monster.hp -= damage;
                        if (monster.hp <= 0) {
                            monster.hp = 0;
                        }
                        this.setState({ player: player, monster: monster })
                        if (monster.hp <= 0) {
                            if (flag) {
                                flag = false;
                                this.battleEnd();
                                return
                            }
                        }
                    }
                } else if (cd < 0) {
                    playerSkillsCdCopy[index] = playerSkillsCd[index];
                }
            }
            for (let [index, item] of monsterSkillsCdCopy.entries()) {
                monsterSkillsCdCopy[index] -= 200;
                let cd = monsterSkillsCdCopy[index]
                if (cd === 0) {
                    let skillId = monsterSkills[index];
                    let item = skillConfig[skillId];
                    if (player.hp > 0) {
                        let damage = this.calcDemage(monster, player, item);
                        player.hp -= damage;
                        if (player.hp < 0) {
                            player.hp = 0;
                        }
                        this.setState({ player: player, monster: monster })
                        if (player.hp <= 0) {
                            if (flag) {
                                flag = false;
                                this.battleEnd();
                                return
                            }
                        }
                    }
                } else if (cd < 0) {
                    monsterSkillsCdCopy[index] = monsterSkillsCd[index];
                }
            }
        }, 200)
    }
    battleEnd = () => {
        clearInterval(this.timer);
        this.timer = null;
        this.setState({ skillPaused: true, skillMount: 0 })
    }
    calcDemage = (attacker, defender, skill) => {
        let hurt = attacker.attack + skill.attack;
        let damage = parseInt((hurt * hurt) / (defender.defend + hurt));
        return damage;
    }
    render() {
        let { player, monster, skillPaused, skillMount } = this.state;
        return (
            <div className="battle">
                {monster && <MonsterComponent monster={monster} skillPaused={skillPaused} skillMount={skillMount} />}
                <div className="line"></div>
                {player && <PlayerComponent player={player} skillPaused={skillPaused} skillMount={skillMount} />}
            </div>
        )
    }

}

export { BattleHandle };